// import React from 'react';
// import logo from './logo.svg';
// import router from './router.png';
// import './App.css';

import styled from 'styled-components'

type fnNeonEffect = (colorDeg: number) => string;
const applyNeonEffect: fnNeonEffect[] = [
  (colorDeg: number) => `
    .1vw 0vw .25vw hsl(${colorDeg}, 100%, 92%),  .2vw 0vw .25vw hsl(${colorDeg}, 100%, 92%),  .4vw 0vw .25vw hsl(${colorDeg}, 100%, 92%),

    .1vw 0vw   0vw hsl(${colorDeg}, 85%, 64%),   .2vw 0vw   0vw hsl(${colorDeg}, 85%, 64%),   .4vw 0vw   0vw hsl(${colorDeg}, 85%, 64%),
    .1vw 0vw  .1vw hsl(${colorDeg}, 85%, 64%),   .2vw 0vw  .1vw hsl(${colorDeg}, 85%, 64%),   .4vw 0vw  .1vw hsl(${colorDeg}, 85%, 64%),
    .1vw 0vw   2vw hsl(${colorDeg}, 85%, 64%),   .2vw 0vw   2vw hsl(${colorDeg}, 85%, 64%),   .4vw 0vw   2vw hsl(${colorDeg}, 85%, 64%),

    .1vw 0vw   1vw hsl(${colorDeg}, 90%, 47%),   .2vw 0vw   1vw hsl(${colorDeg}, 90%, 47%),   .4vw 0vw   5vw hsl(${colorDeg}, 90%, 47%),
    .1vw 0vw   5vw hsl(${colorDeg}, 90%, 47%),   .2vw 0vw  20vw hsl(${colorDeg}, 90%, 47%),   .4vw 0vw  10vw hsl(${colorDeg}, 90%, 47%),
    .1vw 0vw  10vw hsl(${colorDeg}, 90%, 47%),   .2vw 0vw  30vw hsl(${colorDeg}, 90%, 47%),   .4vw 0vw  10vw hsl(${colorDeg}, 90%, 47%)
  `,
  (colorDeg: number) => `
    0 0  10px hsl(${colorDeg}, 100%, 50%),
    0 0  20px hsl(${colorDeg}, 100%, 50%),
    0 0  40px hsl(${colorDeg}, 100%, 50%),
    0 0  80px hsl(${colorDeg}, 100%, 50%),
    0 0 120px hsl(${colorDeg}, 100%, 50%),
    0 0 160px hsl(${colorDeg}, 100%, 50%)
  `
]
  
export const NeonText = styled.span<any>`
  & ~ & {
    margin-left: .2em;
  }
  color: ${props => `hsl(${props.$clrDeg}, 100%, 92%)`};
  color: #fff;
  text-shadow: ${props => applyNeonEffect[0](props.$clrDeg)};
`

export const Subject = ({text}:{
  text: string;
}) => {
  const step = Math.floor( 360 / (text.length) )
  return (
    <>
      <p style={{fontSize: '2.3em', marginTop: '1.2em'}}>
      { text.split('').map((c: string, index: number) => (
        <NeonText key={index} $clrDeg={step * index}>{c}</NeonText>
      ))}
      </p>
    </>
  )
}
